<template>
  <div :class="['navbar-wrap', theme]">
    <div class="left" @click="onBack">
      <slot name="left">
        <i class="icon iconfont icon-31fanhui1"></i>
      </slot>
    </div>
    <div class="center">
      <slot></slot>
    </div>
    <div class="right" @click="onRightBtn">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";

const props = defineProps({
  title: { type: String, default: "" },
  theme: { type: String, default: "light" },
});

const emit = defineEmits(["left-click", "right-click"]);

const router = useRouter();
const onBack = () => {
  emit("left-click");

  // 检查是否有监听者，如果没有则执行 router.back()
  const hasListener = emit("left-click");
  if (!hasListener) {
    router.back();
  }
};
const onRightBtn = () => {
  emit("right-click");
};
</script>

<style lang="scss" scoped>
.navbar-wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100vw;
  height: 60px;
  padding-top: env(safe-area-inset-top);
  z-index: 9999;
  font-size: 16px;

  &.light {
    color: #424242;
  }

  &.dark {
    color: #fff;
  }

  .left {
    display: flex;
    width: 60px;
    justify-content: center;
    align-items: center;
  }

  .center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .right {
    width: 60px;
  }
}
</style>
